<template>
  <div class="waike">
    <div class="dialog">
      <div class="title">
        <span class="txt">{{title}}</span>
        <span class="close" @click="close">×</span>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title","close"],
  data() {
    return {};
  },
  methods: {
    login() {
      alert("登录成功！");
    },
  },
};
</script>

<style lang="scss">
.waike{
  z-index: 20;
  background-color:rgba(0,0,0,.5);
  position:fixed;
  top:0; bottom:0; left:0; right:0;
  .dialog{
    background-color:#fff;
    width:900px;
    border:1px solid #aaa;
    transform:translate(-50%,-50%);
    position:absolute;
    top:50%;
    left:50%;
    >.title{
      height:36px;
      background-color:#008c8c;
      color:#fff;
      line-height:36px;
      >.txt{
        margin-left:10px;
      }
      >.close{
        float:right;
        cursor:pointer;
        margin-right:10px;
        &:hover{
          font-size:1.2em;
        }
      }
    }
    >.content{
      height: 500px;
      >.row{
        margin:50px 300px;
        
        >.label{
          display:inline-block;
          width:80px;
          text-align:right;
        }
        
      }
    }
    >.btns{
      text-align:center;
      border-top:1px solid #ccc;
      height:50px;
      line-height:36px;
      >button{
        margin-right:20px;
        border-radius: 5px;
        background-color: #008c8c;       
      }
    }
  }
}
</style>